<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="increment">加</button>
        <h1>{{count}}</h1>
        <demo></demo>
    </div>
</body>
<!-- 引入vue依赖 -->
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    // a,1 创建一个仓库,状态值
    let store = {
        state:{
            count:888
        },
        //定义一些操作
        //mutations 变异
        mutations:{
            //加1
            increment:()=>{
                store.state.count += 1;
            }
        },
        //increment
        commit:function(type,payload){
            //记录修改的type 还有数据
            //a,increment 1
            //b,increment 1
            //c,increment 1
            store.mutations[type](); //执行函数
        }
    }
    
    Vue.component("demo",{
        template:`<h1>如何去使用到count变量?
                <h2>总线模式:{{this.$root.count}}</h2>
            </h1>`
    })

  let vm =  new Vue({
        el:"#app",
        //state
        data:{
            count:store.state.count
        },
        //actions
        methods:{
            increment(){
                this.count++;
                //提交仓库修改
                store.commit("increment",1)
            }
        }
    })
   /* 
   ├── build                      // 构建相关  
├── config                     // 配置相关
├── exampleImgs                // 项目示例图片
├── outdb                      // 导入数据库的初始化数据
├── server                     // node服务端
│   ├── api.js                    // 封装的接口请求
│   ├── db.js                     // db数据模型定义
│   ├── index.js                  // express服务器
│   ├── mutils.js                 // 服务端工具类
├── src                        // 源代码
│   ├── assets                 // 图片等静态资源
│   ├── components             // 全局公用组件
│   ├── config                 // 接口请求配置
│   ├── fonts                  // fontawesome字体库文件
│   ├── layout                 // 全局 组件
│   ├── page                   // 项目所有的视图
│   ├── register               // 第三方库注册
│   ├── router                 // 登录路由
│   ├── store                  // 项目vuex数据存储器
│   ├── style                  // 全局样式
│   ├── utils                  // 全局公用方法
│   ├── vendor                 // 公用vendor
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化
├── static                     // 第三方不打包资源
│   └── Tinymce                // 富文本
├── .babelrc                   // babel-loader 配置
├── .gitignore                 // git 忽略项
├── eslintrc.js                // eslint 配置项
├── favicon.ico                // favicon图标
├── index.html                 // html模板
├── package.json               // 包依赖配置
└── README.md                  // 说明文件


   */
</script>
</html>